<template>
<x-main>
  <view class="x-box x-small-top">
    <x-preview :data="orderInfo" :columns="orderCol"></x-preview>
  </view>

<!--  <view class="x-box">-->
<!--    <x-preview :data="orderInfo" :columns="orderServiceCol">-->

<!--    </x-preview>-->
<!--  </view>-->

  <view class="x-box">
    <x-preview :data="orderInfo" :columns="userCol">

    </x-preview>
  </view>

<!--  <view class="x-box">-->
<!--    <x-preview :data="orderInfo" :columns="otherCol">-->

<!--    </x-preview>-->
<!--  </view>-->
</x-main>
<x-bottom>
  <view class="x-space-between">
    <view @click="onRedirectBill" class="x-btn x-btn-primary btn">订单明细</view>
    <view class="x-btn x-btn-primary btn">联系售后</view>
  </view>
</x-bottom>
</template>

<script setup>
import XPreview from '@/components/lib/preview'
import {reactive, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import orderStore from '@/stores/modules/order';
import {storeToRefs} from "pinia";
const OrderStore = orderStore();
const {orderInfo} = storeToRefs(OrderStore);
import {Helper, Constant, Msg} from 'core';
//订单基本信息
const orderCol =  ref([
  {label: "订单标签", field: "orderTagDesc"},
  {label: "每期金额", field: "termAmount", suffix: "元"},
  {label: "期数", field: "leaseTerm", suffix: "期"},
  {label: "起租日", field: "leaseStartDate"},
  {label: "还款周期", field: "payCycleDesc"},
  // {label: "还款方式", field: "f1"},
  {label: "订单状态", field: "orderStateDesc"},
  {label: "订单备注", field: "orderRemark"}
]);

//订单服务费费用
const orderServiceCol =  ref([
  {label: "订单服务费", field: "serviceFee", suffix: "元"},
  {label: "押金", field: "deposit", suffix: "元"},
  {label: "其它费用", field: "otherFees", suffix: "元"}
]);

//订单服务费费用
const userCol =  ref([
  {label: "用户姓名", field: "ownerName"},
  {label: "用户手机号", field: "ownerPhone"}
]);

//订单服务费费用
const otherCol =  ref([
  {label: "订单编号", field: "orderNo"},
  {label: "创建时间", field: "createTime"}
]);

const state = reactive({

})

onLoad(async option => {
  let orderNo = option.orderNo;
  await OrderStore.getInfo(orderNo);
})

/**
 * 终止订单
 */
const onRedirectBill = () => {
  uni.navigateTo({
    url: "/pages/bill/list?orderNo=" + orderInfo.value.orderNo
  })
}
</script>

<style scoped lang="less">
.x-box {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.link {
  color: @primary;
  padding-top: 60rpx;
  text-align: center;
}

.note {
  color: red;
  font-size: 24rpx;
  padding: 10rpx;
  box-sizing: border-box;
  text-align: center;
}

.btn {
  width: 48%;
}
</style>
